<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

</head>

<body>
    <script>
        var app = angular.module('myApp', []);
        // 乘法
        app.factory('MathFac', [function () {
            var factory = {};
            factory.mult = function () {
                var res = 1;
                for (var i = 0; i < arguments.length; i++) {
                    res *= arguments[i];
                }
                return res;
            }
            return factory;
        }]);
        app.service('CalcService', function (MathFac) {
            this.square = function () {
                return MathFac.mult.apply(null, arguments);
            }
        });
        app.controller('MathCtrl', function ($scope, CalcService) {
            $scope.leftNum = 3;
            $scope.rightNum = 5;
            $scope.multRes = 15;
            $scope.$watch('leftNum', function () {
                $scope.getMultRes($scope.leftNum, $scope.rightNum)
            });
            $scope.$watch('rightNum', function () {
                $scope.getMultRes($scope.leftNum, $scope.rightNum)
            });
            $scope.getMultRes = function () {
                $scope.multRes = CalcService.square.apply(null, arguments);
            }
        });
    </script>

    <p>乘法运算：</p>
    <div ng-app='myApp' ng-controller='MathCtrl'>
        <input type="text" ng-model='leftNum'> x
        <input type="text" ng-model='rightNum'> =
        <span>{{multRes}}</span>
    </div>
</body>

</html>